<template>
  <view class="page flex-col">
    <view class="box_1 flex-col">
      <view class="box_2 flex-col" style="position: relative;">
        <text class="text_1">首页</text>   
      </view>
     
      
      <view class="box_4 flex-col">
        <view class="box_9" style="display: flex;">
          <view class="image-text_1 flex-row justify-between" style="margin: 20rpx 0 0 20rpx;">
            <image
              class="image_7"
              referrerpolicy="no-referrer"
              :src="user.headimg"
            />
            <view class="text-group_5 flex-col justify-between" @click="tologin()">
              <text class="text_15">{{user.username}}</text>
              <text class="text_16">{{user.account}}</text>
            </view>
           
          </view>
    
        </view>
        

      </view>
      <view class="box_4" style="position: static;height: auto;">
          <view class="box_5 flex-row justify-between">
                <view class="section_2 "
                v-if="role_id == 11"
                style="margin-bottom: 50rpx;"
                @click = "menunav('/pages/sales/keep')">
                  <view style="width: 100%;text-align: center;">
                      <image
                        class="image_3"
                        referrerpolicy="no-referrer"
                        src="@/static/icon/3.png"
                      />
                      <view class="text-group_1 flex-col justify-between">
                        <text class="text_8">售后维修</text>
                      </view>
                  </view>
                </view>
              
              <view class="section_2 " 
              v-if="role_id == 12"
              style="margin-bottom: 50rpx;"
              @click = "menunav('/pages/sales/keep')">
                <view style="width: 100%;text-align: center;">
                    <image
                      class="image_3"
                      referrerpolicy="no-referrer"
                      src="@/static/icon/3.png"
                    />
                    <view class="text-group_1 flex-col justify-between">
                      <text class="text_8">售后维修</text>
                    </view>
                </view>
              </view>
              <view class="section_2 "
              v-else
              style="margin-bottom: 50rpx;"
              @click = "menunav('/pages/produce/daily')">
                <view style="width: 100%;text-align: center;">
                    <image
                      class="image_3"
                      referrerpolicy="no-referrer"
                      src="@/static/icon/3.png"
                    />
                    <view class="text-group_1 flex-col justify-between">
                      <text class="text_8">日报管理</text>
                    </view>
                </view>
              </view>
              <view class="section_2 "
              style="margin-bottom: 50rpx;"
              @click = "menunav('/pages/sales/index')">
                <view style="width: 100%;text-align: center;">
                    <image
                      class="image_3"
                      referrerpolicy="no-referrer"
                      src="@/static/icon/2.png"
                    />
                    <view class="text-group_1 flex-col justify-between">
                      <text class="text_8">售后整改</text>
                    </view>
                </view>
              </view>
              
              <view class="section_2 "
              v-if="role_id!=11"
              @click="addorder()"
              style="margin-bottom: 50rpx;" >
                <view style="width: 100%;text-align: center;">
                    <image
                      class="image_3"
                      referrerpolicy="no-referrer"
                      src="@/static/icon/1.png"
                    />
                    <view class="text-group_1 flex-col justify-between">
                      <text class="text_8">{{role_id == 12?'工程项目':'创建订单'}}</text>
                    </view>
                </view>
                
              </view>
          </view>
      </view>

      <view class="zheng" v-if="msglist"  @click.native="totomsg()">
          <uni-notice-bar show-icon :scrollable="false" :single="true"
              :text="msglist" />
          <view style="margin-top: 25rpx;">
        
          </view>    
      </view>
      <view class="title-line">
          今日新动态
      </view>
      <view>
          <template v-if="lists.length>=1">
              <view v-for="(item,index) in lists" :key="index">
                  <OrderItem :item="item" :role_id="role_id" @delorder="delorder"></OrderItem>
              </view>  
              
          </template>
          <template v-else>
              <view class="more">没有更多~</view>
          </template>
          
      </view>
      
      
    </view>
    <Vmenu v-if="$permission('create_order')"></Vmenu>
  </view>
</template>
<script>
import Vmenu from '@/components/menu/menu.vue'
import OrderItem from '@/components/orderItem.vue'
export default {
  data() {
    return {
      constants: {},
      user:{
          username:'请登录',
          account:'登录后使用APP',
          address:'',
          phone:'',
          headimg:''
      },
      lists:[],
      page:1,
      last_page:1,
      msglist:"",
      role_id:'',
      haslogin:false,
      uploadUrl: "http://localhost/api/user/upload",
      header:{},
    };
  },
  components: {
  	Vmenu,OrderItem
  },
  onPullDownRefresh(){
      this.lists = []
      this.page = 1
      this.getuser()
      this.getlists()
      setTimeout(function () {
          uni.stopPullDownRefresh();
      }, 500);
  },
  onReachBottom(){
      
  },
  onLoad() {
    
  
  },  
  onShow(){
      this.page = 1
      this.lists = []
      this.role_id = uni.getStorageSync('nantong_role_id');
      console.log("role_id",this.role_id)
      if(this.role_id == 1){
          console.log("为什么不走这里")
          
         this.$navto('/pages/index/index')  
      }
      this.haslogin = this.$islogin()
      console.log('haslogin',this.haslogin)
      if(this.$islogin()){
          this.uploadUrl = this.$api.postURL+'user/upload'
          this.header = {Authorization:uni.getStorageSync('nangtong_login_token')}
          
          this.$msgNum()
          this.getuser()
          this.getlists()
          this.getNotice()
      }
     
  },
  methods: {
      addorder(){
          if(this.role_id!=12){
            this.$navto('/pages/yuangong/orderimport')  
          }else{
            this.$navto('/pages/yuangong/orderadd')  
          }
      },
      tologin(){
          if(!this.haslogin){
            uni.navigateTo({
            	url:`/pages/login/index`
            })   
          }
      },
      totomsg(){
          // /pages/yuangong/msg
          uni.switchTab({
              url:'/pages/yuangong/msg'
          })
        
      },
    getNotice(){
        this.$api.get(`notice/list3`).then(({data})=>{
            this.msglist = data.title
        })
    },  
    getlists(){
        let url
        if(this.role_id == 12){
            url = `project.order/orderlist?is_today=1`
        }else{
            url = `order/orderlist?is_today=1`
        }
        this.$api.get(url).then(({data})=>{
            this.last_page = data.last_page
            this.lists = this.lists.concat(data.data)
        })
    }, 
     menunav(url){
         
         if(this.$islogin()){
            this.$navto(url) 
         }else{
            uni.navigateTo({
            	url:`/pages/login/index`
            }) 
         }
         
     }, 
     
     getuser(){
        this.$api.get(`user/main`).then((res)=>{
            this.user = res.data
        }) 
     },
     delorder(id,index){
         var _this = this
         uni.showModal({
             content:'是否确认删除该订单，删除后不可恢复',
             success:function(c){
                 if(c.confirm){
                     var url
                     if(_this.role_id == 12){
                        url = `project.order/delorder`
                     }else{
                        url = `order/delorder` 
                     }
                     _this.$api.post(url,{id:id}).then((res)=>{
                         _this.lists.splice(index,1)
                     })
                 }
             }
         })
         
     }   
  },
}
</script>
<style lang="less">
.page {

  .box_1 {
    position: relative;
    width: 750rpx;

    background-size: 100% 100%;
    .box_2 {
      background-image: linear-gradient(
        90deg,
        rgba(68, 167, 240, 1) 0,
        rgba(68, 167, 240, 1) 0,
        rgba(117, 142, 251, 1) 100%,
        rgba(117, 142, 251, 1) 100%
      );
      width: 750rpx;
      height: 220rpx;
      padding-top: 50rpx;
      .image_1 {
        width: 720rpx;
        height: 24rpx;
        margin: 8rpx 0 0 11rpx;
      }
      .text_1 {
        width: 134rpx;
        height: 33rpx;
        overflow-wrap: break-word;
        color: rgba(255, 255, 255, 1);
        font-size: 34rpx;
        font-family: PingFangSC-Heavy;
        font-weight: 900;
        text-align: center;
        white-space: nowrap;
        line-height: 49rpx;
        margin: 29rpx 0 185rpx 304rpx;
      }
    }
    .box_3 {
      background-color: rgba(255, 255, 255, 1);
      border-radius: 5rpx;
      height: 432rpx;
      width: 689rpx;
      margin: 577rpx 0 46rpx 29rpx;
      .group_1 {
        width: 90rpx;
        height: 30rpx;
        margin-top: 34rpx;
        .section_1 {
          background-color: rgba(72, 164, 241, 1);
          border-radius: 2rpx;
          width: 5rpx;
          height: 30rpx;
        }
        .text_2 {
          width: 58rpx;
          height: 28rpx;
          overflow-wrap: break-word;
          color: rgba(83, 105, 119, 1);
          font-size: 30rpx;
          font-family: PingFangSC-Heavy;
          font-weight: 900;
          text-align: center;
          white-space: nowrap;
          line-height: 49rpx;
        }
      }
      .text-wrapper_1 {
        width: 362rpx;
        height: 28rpx;
        margin: 33rpx 0 0 33rpx;
        .text_3 {
          width: 362rpx;
          height: 28rpx;
          overflow-wrap: break-word;
          color: rgba(70, 96, 119, 1);
          font-size: 28rpx;
          font-family: PingFangSC-Heavy;
          font-weight: 900;
          text-align: center;
          white-space: nowrap;
          line-height: 49rpx;
        }
      }
      .text-wrapper_2 {
        width: 615rpx;
        height: 65rpx;
        margin: 23rpx 0 0 33rpx;
        .text_4 {
          width: 615rpx;
          height: 65rpx;
          overflow-wrap: break-word;
          color: rgba(124, 137, 150, 1);
          font-size: 24rpx;
          font-family: PingFangSC-Heavy;
          font-weight: 900;
          text-align: left;
          line-height: 40rpx;
        }
      }
      .image-wrapper_1 {
        width: 650rpx;
        height: 1rpx;
        margin: 31rpx 0 0 16rpx;
        .image_2 {
          width: 650rpx;
          height: 1rpx;
        }
      }
      .text-wrapper_3 {
        width: 462rpx;
        height: 28rpx;
        margin: 29rpx 0 0 34rpx;
        .text_5 {
          width: 462rpx;
          height: 28rpx;
          overflow-wrap: break-word;
          color: rgba(70, 96, 119, 1);
          font-size: 28rpx;
          font-family: PingFangSC-Heavy;
          font-weight: 900;
          text-align: center;
          white-space: nowrap;
          line-height: 49rpx;
        }
      }
      .text-wrapper_4 {
        width: 604rpx;
        height: 63rpx;
        margin: 21rpx 0 46rpx 33rpx;
        .text_6 {
          width: 604rpx;
          height: 63rpx;
          overflow-wrap: break-word;
          color: rgba(124, 137, 150, 1);
          font-size: 24rpx;
          font-family: PingFangSC-Heavy;
          font-weight: 900;
          text-align: left;
          line-height: 40rpx;
        }
      }
    }
    .box_4 {
      position: absolute;
      left: 0;
      top: 279rpx;
      width: 750rpx;
      // height: 578rpx;
      .box_5 {
        width: 688rpx;
        // height: 197rpx;
        margin: 80rpx 0 0 30rpx;
        .section_2 {
          background-color: rgba(255, 255, 255, 1);
          border-radius: 5rpx;
          width: 220rpx;
          height: 130rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          // justify-content: center;
          .image_3 {
            width: 60rpx;
            height: 50rpx;
            margin: 0 auto;
            // margin: 56rpx 0 0 43rpx;
          }
          .text-group_1 {
          
            // margin: 58rpx 62rpx 0 31rpx;
            .text_7 {
           
              overflow-wrap: break-word;
              color: rgba(70, 96, 119, 1);
              font-size: 56rpx;
              font-family: PingFangSC-Heavy;
              font-weight: 900;
              text-align: left;
              white-space: nowrap;
      
            }
            .text_8 {
            
              overflow-wrap: break-word;
              color: rgba(70, 96, 119, 1);
              font-size: 28rpx;
              font-family: PingFangSC-Heavy;
              font-weight: 900;
              text-align: center;
              white-space: nowrap;
            
            }
          }
        }
        .section_3 {
          background-color: rgba(255, 255, 255, 1);
          border-radius: 5rpx;
          width: 337rpx;
          height: 197rpx;
          .image_4 {
            width: 94rpx;
            height: 84rpx;
            margin: 55rpx 0 0 48rpx;
          }
          .text-group_2 {
            width: 110rpx;
            height: 89rpx;
            margin: 58rpx 70rpx 0 15rpx;
            .text_9 {
              width: 29rpx;
              height: 41rpx;
              overflow-wrap: break-word;
              color: rgba(70, 96, 119, 1);
              font-size: 56rpx;
              font-family: PingFangSC-Heavy;
              font-weight: 900;
              text-align: left;
              white-space: nowrap;
              line-height: 56rpx;
              margin-left: 4rpx;
            }
            .text_10 {
              width: 110rpx;
              height: 27rpx;
              overflow-wrap: break-word;
              color: rgba(70, 96, 119, 1);
              font-size: 28rpx;
              font-family: PingFangSC-Heavy;
              font-weight: 900;
              text-align: center;
              white-space: nowrap;
              line-height: 49rpx;
              margin-top: 21rpx;
            }
          }
        }
      }
      .box_6 {
        width: 688rpx;
        height: 197rpx;
        margin: 16rpx 0 24rpx 30rpx;
        .box_7 {
          background-color: rgba(255, 255, 255, 1);
          border-radius: 5rpx;
          width: 337rpx;
          height: 197rpx;
          .image_5 {
            width: 95rpx;
            height: 82rpx;
            margin: 54rpx 0 0 51rpx;
          }
          .text-group_3 {
            width: 110rpx;
            height: 94rpx;
            margin: 54rpx 61rpx 0 20rpx;
            .text_11 {
              width: 64rpx;
              height: 42rpx;
              overflow-wrap: break-word;
              color: rgba(70, 96, 119, 1);
              font-size: 56rpx;
              font-family: PingFangSC-Heavy;
              font-weight: 900;
              text-align: left;
              white-space: nowrap;
              line-height: 56rpx;
              margin-left: 1rpx;
            }
            .text_12 {
              width: 110rpx;
              height: 28rpx;
              overflow-wrap: break-word;
              color: rgba(70, 96, 119, 1);
              font-size: 28rpx;
              font-family: PingFangSC-Heavy;
              font-weight: 900;
              text-align: center;
              white-space: nowrap;
              line-height: 49rpx;
              margin-top: 24rpx;
            }
          }
        }
        .box_8 {
          background-color: rgba(255, 255, 255, 1);
          border-radius: 5rpx;
          width: 337rpx;
          height: 197rpx;
          .image_6 {
            width: 91rpx;
            height: 89rpx;
            margin: 52rpx 0 0 51rpx;
          }
          .text-group_4 {
            width: 137rpx;
            height: 95rpx;
            margin: 53rpx 39rpx 0 19rpx;
            .text_13 {
              width: 31rpx;
              height: 42rpx;
              overflow-wrap: break-word;
              color: rgba(70, 96, 119, 1);
              font-size: 56rpx;
              font-family: PingFangSC-Heavy;
              font-weight: 900;
              text-align: left;
              white-space: nowrap;
              line-height: 56rpx;
              margin-left: 1rpx;
            }
            .text_14 {
              width: 137rpx;
              height: 28rpx;
              overflow-wrap: break-word;
              color: rgba(70, 96, 119, 1);
              font-size: 28rpx;
              font-family: PingFangSC-Heavy;
              font-weight: 900;
              text-align: center;
              white-space: nowrap;
              line-height: 49rpx;
              margin-top: 25rpx;
            }
          }
        }
      }
      .box_9 {
        box-shadow: 0rpx 3rpx 24rpx 0rpx rgba(158, 175, 207, 0.21);
        background-color: rgba(255, 255, 255, 1);
        border-radius: 15rpx;
        position: absolute;
        left: 29rpx;
        top: -90rpx;
        width: 691rpx;
        height: 140rpx;
        overflow-x: hidden;
        .image-text_1 {
          width: 331rpx;
          height: 73rpx;
          // margin: 47rpx 0 0 42rpx;
          .image_7 {
            width: 73rpx;
            height: 73rpx;
            border-radius: 50%;
            background-color: #f5f5f5;
          }
          .text-group_5 {
            width: 237rpx;
            height: 69rpx;
            margin-top: 1rpx;
            .text_15 {
              width: 97rpx;
              height: 33rpx;
              overflow-wrap: break-word;
              color: rgba(70, 96, 119, 1);
              font-size: 34rpx;
              font-family: PingFangSC-Heavy;
              font-weight: 900;
              text-align: center;
              white-space: nowrap;
              line-height: 49rpx;
              margin-left: 1rpx;
            }
            .text_16 {
              width: 237rpx;
              height: 23rpx;
              overflow-wrap: break-word;
              color: rgba(174, 185, 196, 1);
              font-size: 24rpx;
              font-family: PingFangSC-Heavy;
              font-weight: 900;
              text-align: left;
              white-space: nowrap;
              line-height: 49rpx;
              margin-top: 13rpx;
            }
          }
        }
        .text-wrapper_5 {
          background-color: rgba(248, 248, 248, 1);
          border-radius: 15rpx;
          width: 691rpx;
          height: 86rpx;
          margin-top: 32rpx;
          .text_17 {
            width: 47rpx;
            height: 22rpx;
            overflow-wrap: break-word;
            color: rgba(142, 153, 163, 1);
            font-size: 24rpx;
            font-family: PingFangSC-Heavy;
            font-weight: 900;
            text-align: left;
            white-space: nowrap;
            line-height: 49rpx;
            margin: 24rpx 0 0 52rpx;
          }
          .text_18 {
            width: 522rpx;
            height: 25rpx;
            overflow-wrap: break-word;
            color: rgba(33, 53, 71, 1);
            font-size: 26rpx;
            font-family: PingFangSC-Medium;
            font-weight: 500;
            text-align: center;
            white-space: nowrap;
            line-height: 49rpx;
            margin: 23rpx 50rpx 0 20rpx;
          }
        }
      }
      .text-wrapper_6 {
        box-shadow: 0rpx 6rpx 5rpx 0rpx rgba(57, 204, 175, 0.19);
        background-image: linear-gradient(
          90deg,
          rgba(62, 212, 183, 1) 0,
          rgba(62, 212, 183, 1) 0,
          rgba(39, 198, 168, 1) 100%,
          rgba(39, 198, 168, 1) 100%
        );
        
        border-radius: 24rpx 0 0 24rpx;
        height: 50rpx;
        width: 130rpx;
        position: absolute;
        left: 588rpx;
        top: -74rpx;
        .text_19 {
          width: 94rpx;
          height: 23rpx;
          overflow-wrap: break-word;
          color: rgba(255, 255, 255, 1);
          font-size: 22rpx;
          font-family: PingFangSC-Heavy;
          font-weight: 900;
          text-align: left;
          white-space: nowrap;
          line-height: 49rpx;
          margin: 0 0 0 22rpx;
        }
      }
    }
  }
}
.systemset{
    position:absolute;
    top: 20rpx;
    right: 10rpx;
}
.zheng{
    width: 700rpx;
    margin: 0 auto;
    // margin-top: 50rpx;
}
.title-line{
    text-indent: 20rpx;
    position: relative;
    font-weight: bold;
    color: #9B9BA3;
    font-size: 30rpx;
    width: 700rpx;
    margin: 0 auto;
    &::before{
        content: " ";
        position: absolute;
        width: 6rpx;
        height: 30rpx;
        background: #52A0F3;
        border-radius: 3rpx;
        left: 0;
        top:6rpx;
    }
}

.order{
    .order-header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 80rpx;
        border-bottom: 1px solid #e9e9eb;
        .ordersn{
            color: #000;
            font-weight: 600;
        }
        .timer{
            font-size: 26rpx;
            color: #3a3a3a;
            display: flex;
            align-items: center;
        }
    }
    .content{
        .goods_name{
            // height: 60rpx;
            .title{
                font-weight: bold;
                width: 80%;
            }
            .status_name{
                
            }
        }
    }
    .footers{
        height: 80rpx;
       .user{
           display: flex;
           align-items: center;
          .headimg{
              width: 60rpx;
              height: 60rpx;
              margin-right: 10rpx;
              image{
                  width: 60rpx;
                  height: 60rpx;
                  border-radius: 50%;
              }
          } 
       }
        .action{
             align-items: center;
            button{
                height: 60rpx;
                margin: 0 10rpx;
            }
        } 
    }

}

</style>
